<template>
	<sw-block-table :list="list" :mode="mode">
		<template v-slot:bodybox="{ data }">
			<div class="library_block_body" @click="handleLookLibrary(data)">
				<el-image :src="libraryCover(data)" :alt="data.name" />
				<span class="title">{{ data.name }}</span>
				<p class="avatar">
					<el-avatar :size="24" :src="avatarUrl" />
					{{ data.createName }}
				</p>
			</div>
		</template>
		<template v-slot:buttons="{ data }">
			<div class="library_block_button">
				<div class="count">
					<i class="el-icon-file-count"></i>
					{{ data.diskCount }}
				</div>
				<slot name="handle" :data="data"></slot>
			</div>
		</template>
		<template slot="columns">
			<el-table-column label="库名称" min-width="360">
				<template slot-scope="{ row }">
					<div class="library_table_name" @click="handleLookLibrary(row)">
						<el-image :src="libraryCover(row)" :alt="row.name" />
						<h4>{{ row.name }}</h4>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="建库人" min-width="120">
				<template slot-scope="{ row }">
					<div class="library_table_avatar">
						<el-avatar :size="36" :src="avatarUrl" />
						<h4>{{ row.createName }}</h4>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="库文件" min-width="120">
				<template slot-scope="{ row }">
					<i class="el-icon-file-count"></i>
					{{ row.diskCount }}个文件
				</template>
			</el-table-column>
			<el-table-column label="更新时间" min-width="160">
				<template slot-scope="{ row }">
					<i class="el-icon-time"></i>
					{{ row.updateTime }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="56" align="center">
				<template slot-scope="{ row }">
					<div class="library_table_button">
						<slot name="handle" :data="row"></slot>
					</div>
				</template>
			</el-table-column>
		</template>
	</sw-block-table>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		value: { type: Array, default: () => [] },
		list: { type: Array, default: () => [] },
		mode: { type: String, default: '' }
	},
	data() {
		return {
			avatarUrl: require('@/assets/img/avatar_image.png')
		};
	},
	computed: {
		...mapGetters(['siteInfo', 'userInfo'])
	},
	methods: {
		libraryCover(data) {
			let imageUrl = data.coverInfo?.iconUrl;
			return !imageUrl ? this.siteInfo.defaultCover : imageUrl;
		},
		handleLookLibrary(data) {
			this.$emit('look', data);
		}
	}
};
</script>

<style lang="scss" scoped>
.library_block_body {
	position: relative;
	padding-top: 56.25%;
	cursor: pointer;
	.el-image,
	span.title,
	p.avatar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.el-image {
		z-index: 1;
	}
	span.title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		line-height: 1.5;
		z-index: 2;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
	p.avatar {
		top: auto;
		bottom: 0;
		height: auto;
		padding: 6px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		font-size: 14px;
		z-index: 2;
		color: #fff;
	}
	.el-avatar {
		margin-right: 10px;
	}
}
.library_block_button::v-deep {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	font-size: 14px;
	padding: 0 5px;
	height: 36px;
	div.count {
		padding: 0 11px;
	}
	.el-dropdown-selfdefine {
		cursor: pointer;
		margin-right: 11px;
		line-height: 1;
	}
}
.library_table_button::v-deep {
	.el-dropdown-selfdefine {
		cursor: pointer;
		line-height: 1;
		padding: 0 10px;
	}
}
.library_table_name {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	.el-image {
		width: 96px;
		height: 54px;
		flex-shrink: 0;
	}
	h4 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 24px;
		overflow: hidden;
		font-size: 14px;
		padding: 0 10px;
	}
}
.library_table_avatar {
	display: flex;
	align-items: center;
	.el-avatar {
		margin-right: 10px;
	}
}
</style>
